<template>
  <div class="my-allorder">
    <van-tabs v-model="active">
      <van-tab title="待确认">
        <!-- 待确认组件 -->
        <tobe-enter
          :order="enterlist"
          @delete="deleteOrder"
          v-model="active"
        ></tobe-enter>
      </van-tab>
      <van-tab title="待支付">
        <!-- 待支付组件 -->
        <tobe-paid :order="paidlist" @delete="deleteOrder"></tobe-paid>
      </van-tab>
      <van-tab title="待服务">
        <!-- 待服务组件 -->
        <tobe-served
          :order="servedlist"
          @toEvaluated="toEvaluated"
          @delete="deleteOrder"
        ></tobe-served>
      </van-tab>
      <van-tab title="待评价">
        <!-- 待评价组件 -->
        <tobe-evaluated
          :order="evaluatedlist"
          @delete="deleteOrder"
        ></tobe-evaluated>
      </van-tab>
      <van-tab title="全部">
        <div class="ordernull" v-if="JSON.stringify(order) == '[]'">
          <van-image
            width="150px"
            height="150px"
            src="//static.daojia.com/pt/project/h5-order-list/img/no-data.202566e.png"
          />
          <p class="subscribe">还没有待支付的订单，快去下单吧</p>
          <div>
            <van-button color="#e6454a" plain to="/home">立即预约</van-button>
          </div>
        </div>
        <!-- 全部 -->
        <van-cell-group v-else v-for="(item, index) in order" :key="index">
          <van-cell>
            <template #title>
              <span class="icon">
                <van-icon
                  class="iconfont icontiane"
                  size="15px"
                  color="#fff"
                ></van-icon>
              </span>
              <span class="custom-title" style="font-size: 16px">到家自营</span>
              <van-icon name="arrow" />
            </template>
            <template #right-icon>
              <span class="text" v-if="item.state == 0">待确认</span>
              <span class="text" v-if="item.state == 1">待支付</span>
              <span class="text" v-if="item.state == 2">待服务</span>
              <span class="text" v-if="item.state == 3">已完成</span>
            </template>
            <div slot="label">
              <van-cell-group>
                <van-cell>
                  <div slot="icon" class="baojie">
                    <img
                      class="img"
                      src="https://images.daojia.com/dop/custom/e3cffa59ed829a4b7f79e148e92ce81c.png?x-oss-process=image/resize,w_105,h_105/format,webp"
                    />
                    <span>{{ item.type }}</span>
                  </div>
                </van-cell>
              </van-cell-group>
              <div class="time">
                <span>{{ item.time }}</span>
              </div>
              <div class="adress">
                <span>{{ item.address }}</span>
              </div>
            </div>
          </van-cell>
          <van-cell>
            <div class="btn">
              <van-button plain type="default" @click="deleteOrder(item.id)"
                >删除订单</van-button
              >
            </div>
          </van-cell>
        </van-cell-group>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import TobePaid from "./components/TobePaid";
import TobeEvaluated from "./components/TobeEvaluated";
import TobeServed from "./components/TobeServed";
import TobeEnter from "./components/TobeEnter";
import store from "@/store";
import { getOrder, deleteOrder } from "@/api/cart";

export default {
  name: "MyallOrder",
  components: {
    TobePaid,
    TobeEvaluated,
    TobeServed,
    TobeEnter,
  },
  props: {},
  data() {
    return {
      active: store.getters.active,
      // 订单列表
      order: [],
      // 待确认列表
      enterlist: [],
      // 待支付列表
      paidlist: [],
      // 待服务列表
      servedlist: [],
      // 待评价列表
      evaluatedlist: [],
    };
  },
  computed: {},
  watch: {
    active: {
      handler(newval) {
        store.commit("cart/updateActive", newval);
      },
    },
  },
  created() {
    this.loadAllOrder();
  },
  mounted() {},
  methods: {
    async loadAllOrder() {
      this.order = [];
      this.enterlist = [];
      this.enterlist = [];
      this.paidlist = [];
      this.servedlist = [];
      this.evaluatedlist = [];
      const data = await getOrder({ user_id: store.getters.id });
      console.log(data);
      this.order = data;
      this.order.forEach((item) => {
        if (item.state == 0) {
          this.enterlist.push(item);
        } else if (item.state == 1) {
          this.paidlist.push(item);
        } else if (item.state == 2) {
          this.servedlist.push(item);
        } else if (item.state == 3) {
          this.evaluatedlist.push(item);
        }
      });
      this.$forceUpdate();
    },
    toEvaluated(event) {
      console.log(event);
      // this.evaluatedlist.push(event);
      this.loadAllOrder();
      this.active = this.active + 1;
    },
    deleteOrder(id) {
      this.$dialog
        .confirm({
          title: "是否删除订单",
        })
        .then(async () => {
          // on confirm
          await deleteOrder(id);
          this.loadAllOrder();
          this.$toast("删除成功");
        })
        .catch(() => {
          // on cancel
          this.$toast("已取消");
        });
    },
  },
};
</script>
<style lang='less' scoped>
.ordernull {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .subscribe {
    color: #292d33;
    line-height: 17px;
    font-size: 17px;
  }
}
.icon {
  background-color: rgb(255, 66, 76);
  margin-right: 5px;
  border-radius: 30px;
}
.custom-title {
  margin-right: 5px;
}
.text {
  font-size: 17px;
  color: rgb(132, 140, 179);
  font-weight: 500;
}
.baojie {
  display: flex;
  justify-content: center;
  align-items: center;
}
.img {
  width: 35px;
  height: 35px;
  margin-right: 10px;
}
.time {
  margin-bottom: 5px;
}
.time,
.adress span {
  font-size: 16px;
  color: #000;
}
.btn {
  float: right;
}
</style>
